<template>
  <div class="headerAll">
    <div class="top_header">
      <div class="header">
        <div class="header_left" style="display: flex;justify-content: flex-start;">
          <!-- <img class="logo" src="../assets/logo.png" alt @click="logo" /> -->
        </div>
        <div class="header_right">
          <div class="header_right_a vv" @click="tolearn(4)"><img class="logo" src="../assets/header_icon1.png"/>学习中心</div>
          <div class="header_right_a vv" @click="tolearn(1)"><img class="logo" src="../assets/header_icon2.png"/>我的订单</div>
          <div
            class="header_right_a flex aa"
            :class="aabg==true?'bga':''"
            @mouseover="aa"
            @mouseleave="aa_go"
          >
            <img class="logo" src="../assets/header_icon3.png"/>手机学习
            <!-- <img src="../assets/black_down.png" alt />
            <div class="appcode" v-show="isaadown">
              <div>
                <img src="../assets/Wx2.png" alt />
                <div>随时逛&nbsp;&nbsp;&nbsp;随时看</div>
              </div>
            </div> -->
          </div>
          <div class="header_right_a vv" @click="toAise()"><img class="logo" src="../assets/header_icon1.png"/>帮助</div>
          <div class="header_right_a bb flex">
            <span @click="login" v-if="userphone==''">登录</span>
            <div
              class="header_right_a bb2"
              v-if="userphone!=''"
              @mouseover="mouseOver"
              @mouseleave="mouseLeave"
            >
              <p :class="hide_addr==true?'bb2_p1':''">{{userphone}}</p>
              <p v-show="hide_addr" @click="goorder(0)" class="bb2_p2">账号设置</p>
              <p v-show="hide_addr" @click="goorder(1)" class="bb2_p2">我的订单</p>
              <p v-show="hide_addr" @click="goorder(2)" class="bb2_p2">购物车</p>
              <p v-show="hide_addr" @click="goorder(4)" class="bb2_p2">我的课程</p>
            </div>
          </div>
          <div class="header_right_a red_color" @click="register" v-if="userphone==''">注册</div>
          <div class="header_right_a red_color" @click="outlogin" v-if="userphone!=''">退出</div>
        </div>
      </div>
    </div>
    <!-- 导航 -->
    <div class="nav-wrap" v-show="'首页'!=ishome">
      <div class="nav w">
        <div class="nav_div">
          <div class="nav_left" @mouseover="over_l()" @mouseleave="leave_l()">
            <img src="../assets/logo.png" alt="">
            <!-- <p class="flex">
              <img src="../assets/all_kaoshi.png" alt />全部考试
            </p>
            <ul class="f_ul" v-show="isfen">
              <div>
                <p>各省统考</p>
                <img src="../assets/allkaoshi_down.png" alt />
                <div class="out_hidden">
                  <div class="over_hidden">
                    <div class="over_li">
                      <li
                        v-for="(list_f,list_index) in zhuanyef"
                        :key="list_index"
                        @click="listf(0,list_f.id,list_f.name)"
                      >{{list_f.name}}</li>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <p>名校校招</p>
                <img src="../assets/allkaoshi_down.png" alt />
                <div class="out_hidden">
                  <div class="over_hidden">
                    <div class="over_li">
                      <li
                        v-for="(list_w,list_index) in zhuanyef"
                        :key="list_index"
                        @click="listf(1,list_w.id,list_w.name)"
                      >{{list_w.name}}</li>
                    </div>
                  </div>
                </div>
              </div>
            </ul> -->
          </div>
          <div class="nav_right">
            <div :class="'首页'==ishome?'active':''" @click="homeitem('首页')">首页</div>
            <div :class="'艺考选课'==ishome?'active':''" @click="homeitem('艺考选课')">艺考选课</div>
            <div :class="'艺考图书'==ishome?'active':''" @click="homeitem('艺考图书')">艺考图书</div>
            <div :class="'授课名师'==ishome?'active':''" @click="homeitem('授课名师')">授课名师</div>
            <div :class="'免费试听'==ishome?'active':''" @click="homeitem('免费试听')">免费试听</div>
            <div :class="'高校招生简章'==ishome?'active':''" @click="homeitem('高校招生简章')">高校招生简章</div>
          </div> 
        </div>
      </div>
    </div>
    <div class="register">
      <el-dialog :visible.sync="modelRegister" width="437px">
        <div class="reg_con">
          <div class="reg_top">欢迎注册
            <img src="../assets/logo.png" alt="">
            艺传天下</div>
          <div class="reg_div">
            <input type="text" v-model="s_phone" placeholder="请输入手机号" />
          </div>
          <div class="reg_div">
            <input type="text" v-model="s_code" placeholder="请输入验证码" />
            <button class="reg_p" @click="getCode" :disabled="iscode">{{code}}</button>
          </div>
          <div class="reg_div" style="position:relative;">
            <p class="addr_slo">所在区域:</p>
            <div style="width:64%;" class="reg_div_div">
              <input
                type="text"
                v-model="addressC"
                placeholder="请选择所属省份"
                readonly
                @click="choose_prev"
                style="cursor: pointer;width:285px;"
              />
              <img src="../assets/select_down.png" alt class="img_prev" @click="choose_prev" />
            </div>

            <div class="address" style="top:65px;" v-show="register_addr">
              <div
                v-for="(addresslist,adddressindex) in address"
                :key="adddressindex"
                @click="chooseadd(addresslist.addname)"
                :class="addressC==addresslist.addname?'addBg':''"
              >{{addresslist.addname}}</div>
            </div>
          </div>
          <div class="reg_div">
            <input :type="ispassword" v-model="s_password" placeholder="请输入密码" />
            <img
              src="../assets/see_pass.png"
              alt
              class="pass_img"
              @click="pass_show"
              v-show="!isseecode"
            />
            <img
              src="../assets/nosee_pass.png"
              alt
              class="pass_img2"
              @click="pass_show"
              v-show="isseecode"
            />
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="amendSure()">注册</el-button>
          <!-- <div class="jump_login flex">
            <p class="jump_line"></p>
            <p class="jump_txet" @click="go_login">账户登录</p>
            <p class="jump_line"></p>
          </div>-->
        </span>
      </el-dialog>
    </div>
    <div class="register">
      <el-dialog :visible.sync="modelLogin" width="437px">
        <div class="reg_con">
          <div class="reg_top">欢迎登录<img src="../assets/logo.png" alt="">艺传天下</div>
          <div class="reg_div">
            <input type="text" v-model="s_phone" placeholder="请输入手机号" />
          </div>
          <div class="reg_div" v-if="login_name=='密码登录'">
            <input type="text" v-model="s_code" placeholder="请输入验证码" />
            <button class="reg_p" @click="getCode" :disabled="iscode">{{code}}</button>
          </div>
          <div class="reg_div" v-if="login_name=='验证码登录'">
            <input :type="ispassword" v-model="s_password" placeholder="请输入密码" />
            <img
              src="../assets/see_pass.png"
              alt
              class="pass_img"
              @click="pass_show"
              v-show="!isseecode"
            />
            <img
              src="../assets/nosee_pass.png"
              alt
              class="pass_img2"
              @click="pass_show"
              v-show="isseecode"
            />
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="sureLogin()">登录</el-button>
          <div class="footer_button flex">
            <p @click="goReg()">免费注册</p>
            <p>
              <span @click="gologin()" style="color:#c8a94f;">{{login_name}}</span>
              <span @click="goForfet()">忘记密码?</span>
            </p>
          </div>
          <!-- <div class="jump_login flex">
            <p class="jump_line"></p>
            <p class="jump_txet" @click="go_login">账户登录</p>
            <p class="jump_line"></p>
          </div>-->
        </span>
      </el-dialog>
    </div>
    <div class="register">
      <el-dialog :visible.sync="modelPass" width="437px">
        <div class="reg_con">
          <div class="reg_top">欢迎登录<img src="../assets/logo.png" alt="">艺传天下</div>
          <div class="reg_div">
            <input type="text" v-model="s_phone" placeholder="请输入手机号" />
          </div>
          <div class="reg_div">
            <input type="text" v-model="s_code" placeholder="请输入验证码" />
            <button class="reg_p" @click="getCode" :disabled="iscode">{{code}}</button>
          </div>
          <div class="reg_div">
            <input :type="ispassword" v-model="s_old_password" placeholder="请输入新密码" />
            <img
              src="../assets/see_pass.png"
              alt
              class="pass_img"
              @click="pass_show"
              v-show="!isseecode"
            />
            <img
              src="../assets/nosee_pass.png"
              alt
              class="pass_img"
              @click="pass_show"
              v-show="isseecode"
            />
          </div>
          <div class="reg_div">
            <input :type="ispassword2" v-model="s_new_password" placeholder="请确认新密码" />
            <img
              src="../assets/see_pass.png"
              alt
              class="pass_img"
              @click="pass_show2"
              v-show="!isseecode2"
            />
            <img
              src="../assets/nosee_pass.png"
              alt
              class="pass_img"
              @click="pass_show2"
              v-show="isseecode2"
            />
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="surePass()">确认</el-button>
          <!-- <div class="jump_login flex">
            <p class="jump_line"></p>
            <p class="jump_txet" @click="go_login">账户登录</p>
            <p class="jump_line"></p>
          </div>-->
        </span>
      </el-dialog>
    </div>
    <AppFooter style="display:none" ref="foter"></AppFooter>
  </div>
</template>

<script>
import AppFooter from "./footer";
import address from "../../static/address";
import {
  send_message,
  register,
  yanzlogin,
  mmlogin,
  forgetmm,
  info,
  outlogin,
  Professionallist
} from "../api/index.js";
export default {
  props: {},
  name: "App",
  props: ["parentToChild"],
  data() {
    return {
      address: address,
      isdown: false, //下拉箭头
      addressC: "全国",
      aabg: false,
      isaadown: false,
      ishome: "首页",
      modelRegister: false, //注册弹窗
      s_phone: "",
      s_code: "",
      s_password: "",
      online_code: "",
      code: "获取验证码",
      iscode: false,
      register_addr: false,
      ispassword: "password",
      ispassword2: "password",
      isseecode: true,
      isseecode2: true,
      modelLogin: false, //登录弹窗
      login_name: "密码登录",
      modelPass: false, //密码tanc
      s_old_password: "",
      s_new_password: "", //新密码
      userid: "",
      userphone: "",
      hide_addr: false,
      zhuanyef: [],
      isfen: false,
      timer: null,
      cartnum: 0
    };
  },
  computed: {},
  created() {},
  mounted() {
    if (
      localStorage.getItem("YKuserid") &&
      !localStorage.getItem("YKuserphone")
    ) {
      this.userid = localStorage.getItem("YKuserid");
      this.userDetail();
    }
    if (localStorage.getItem("YKuserphone")) {
      this.userphone = localStorage.getItem("YKuserphone");
      this.cartnum = localStorage.getItem("cartnum");
    }
    Professionallist()
      .then(res => {
        if (res.data.code == 0) {
          this.zhuanyef = res.data.rows;
        }
      })
      .catch(e => {});
    this.top_active();
  },
  watch: {},
  methods: {
    //专业
    listf(i, id, name) {
      this.$emit("cid", id);
      this.$router.push({
        name: "channel",
        params: {
          type: i,
          profationId: id,
          name: name
        }
      });
    },
    top_active() {
      this.ishome = this.parentToChild;
    },
    //显示专业分类
    over_l() {
      this.isfen = true;
    },
    leave_l() {
      this.isfen = false;
    },
    userDetail() {
      let msg = {
        id: localStorage.getItem("YKuserid")
      };
      info(this.qs(msg))
        .then(res => {
          if (res.data.code == 0) {
            localStorage.setItem("YKuserphone", res.data.ykUser.phone);
            localStorage.setItem("cartnum", res.data.ykUser.cartnum);
            this.userphone = res.data.ykUser.phone;
            // this.$router.go(0);
            this.cartnum = res.data.ykUser.cartnum;
          }
        })
        .catch(e => {});
    },
    header_left_all() {
      this.$router.push({
        name: "home"
      });
    },
    chooseadd(addNmae) {
      this.addressC = addNmae;
      this.$emit("c_addrname", addNmae);
      this.register_addr = !this.register_addr;
    },
    aa() {
      this.isaadown = true;
      this.aabg = true;
    },
    aa_go() {
      this.isaadown = false;
      this.aabg = false;
    },
    //头部跳转
    homeitem(item) {
      this.ishome = item;
      if (item == "首页") {
        this.$router.push({
          name: "home"
        });
      } else if (item == "授课名师") {
        this.$router.push({
          name: "shoukeList"
        });
      } else if (item == "艺考图书") {
        this.$router.push({
          name: "tushuList"
        });
      } else if (item == "艺考选课") {
        this.$router.push({
          name: "xuankeList"
        });
      } else if (item == "免费试听") {
        this.$router.push({
          name: "callus"
        });
      } else if (item == "高校招生简章") {
        this.$router.push({
          name: "gaoxiaoList"
        });
      }
    },
    logo() {
      this.$router.push({
        name: "home"
      });
    },
    //返回顶部
    backtop() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    backhome() {
      this.$router.push({
        name: "home"
      });
      sessionStorage.setItem("header_click", "home");
    },
    //注册弹窗
    register() {
      this.modelRegister = true;
    },
    getCode() {
      var reg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
      if (this.s_phone) {
        if (!reg.test(this.s_phone)) {
          this.$message({
            type: "error",
            message: "手机号格式不正确"
          });
          return;
        }
        let that = this;
        that.code = 60;
        that.iscode = true;
        that.timer = setInterval(() => {
          that.code = that.code - 1;
          if (that.code < 1) {
            clearInterval(that.timer);
            that.code = "获取验证码";
            that.iscode = false;
          }
        }, 1000);
        let msg = {
          mobile: this.s_phone
        };
        send_message(this.qs(msg))
          .then(res => {
            if (res.data.code == 0) {
              that.online_code = res.data.msg;
            } else {
              clearInterval(that.timer);
              that.code = "获取验证码";
              that.iscode = false;
              this.$message({
                type: "error",
                message: res.data.msg
              });
            }
          })
          .catch(e => {});
      } else {
        this.$message({
          type: "error",
          message: "请先填写手机号"
        });
      }
    },
    //注册
    amendSure() {
      let that = this;
      if (this.s_phone && this.s_code && this.addressC && this.s_password) {
        if (this.s_code != this.online_code) {
          this.$message({
            type: "error",
            message: "验证码不正确"
          });
          return;
        }
        let msg = {
          phone: this.s_phone,
          password: this.s_password,
          username: ""
        };
        register(this.qs(msg))
          .then(res => {
            this.$message({
              type: "info",
              message: res.data.msg
            });
            this.modelRegister = false;
            if (res.data.code == 0) {
              that.s_phone = "";
              that.s_code = "";
              that.addressC = "";
              that.s_password = "";
              clearInterval(that.timer);
              that.code = "获取验证码";
              that.iscode = false;
              that.modelLogin = true;
              // this.$message({
              //   type: "success",
              //   message: "请登录"
              // });
              this.modelLogin = true;
            } else {
              clearInterval(that.timer);
              that.code = "获取验证码";
              that.iscode = false;
            }
          })
          .catch(e => {});
      } else {
        this.$message({
          type: "error",
          message: "请先输入注册信息"
        });
      }
    },
    choose_prev() {
      this.register_addr = !this.register_addr;
    },
    //显示密码
    pass_show() {
      if (this.ispassword == "password") {
        this.ispassword = "text";
      } else if (this.ispassword == "text") {
        this.ispassword = "password";
      }
      this.isseecode = !this.isseecode;
    },
    //显示新密码
    pass_show2() {
      if (this.ispassword2 == "password") {
        this.ispassword2 = "text";
      } else if (this.ispassword2 == "text") {
        this.ispassword2 = "password";
      }
      this.isseecode2 = !this.isseecode2;
    },
    //密码和验证码登录切换
    gologin() {
      if (this.login_name == "密码登录") {
        this.login_name = "验证码登录";
      } else if ((this.login_name = "验证码登录")) {
        this.login_name = "密码登录";
      }
    },
    //忘记密码
    goForfet() {
      this.modelPass = true;
      this.modelLogin = false;
    },
    goReg() {
      this.modelRegister = true;
      this.modelLogin = false;
    },
    //验证码登录
    sureLogin() {
      let that = this;
      if (this.login_name == "密码登录") {
        if (this.s_phone && this.s_code) {
          if (this.s_code != this.online_code) {
            this.$message({
              type: "error",
              message: "验证码不正确"
            });
            return;
          }
          let msg = {
            phone: this.s_phone
          };
          yanzlogin(this.qs(msg))
            .then(res => {
              this.$message({
                type: "info",
                message: res.data.msg
              });
              if (res.data.code == 0) {
                localStorage.setItem("YKuserid", res.data.userId);
                this.userid = res.data.userId;
                this.userDetail();
                this.s_phone = "";
                this.s_code = "";
                clearInterval(that.timer);
                that.code = "获取验证码";
                that.iscode = false;
                this.modelLogin = false;
                // this.$router.go(0);
              } else {
                clearInterval(that.timer);
                that.code = "获取验证码";
                that.iscode = false;
              }
            })
            .catch(e => {});
        } else {
          this.$message({
            type: "error",
            message: "请先输入登录信息"
          });
        }
      } else if (this.login_name == "验证码登录") {
        var reg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
        if (this.s_phone && this.s_password) {
          if (!reg.test(this.s_phone)) {
            this.$message({
              type: "error",
              message: "手机号格式不正确"
            });
            return;
          }
          let msg = {
            phone: this.s_phone,
            password: this.s_password
          };
          mmlogin(this.qs(msg))
            .then(res => {
              this.$message({
                type: "info",
                message: res.data.msg
              });
              if (res.data.code == 0) {
                localStorage.setItem("YKuserid", res.data.userId);
                this.userid = res.data.userId;
                this.userDetail();
                this.s_phone = "";
                this.s_password = "";
                this.modelLogin = false;
              }
            })
            .catch(e => {});
        } else {
          this.$message({
            type: "error",
            message: "请先输入登录信息"
          });
        }
      }
    },
    surePass() {
      let that = this;
      if (
        this.s_phone &&
        this.s_old_password &&
        this.s_new_password &&
        this.s_code
      ) {
        if (this.s_code != this.online_code) {
          this.$message({
            type: "error",
            message: "验证码不正确"
          });
          return;
        }
        if (this.s_old_password != this.s_new_password) {
          this.$message({
            type: "error",
            message: "两次密码不一致"
          });
          return;
        }
        let msg = {
          phone: this.s_phone,
          password: this.s_new_password
        };
        forgetmm(this.qs(msg))
          .then(res => {
            this.$message({
              type: "info",
              message: res.data.msg
            });
            if (res.data.code == 0) {
              this.s_phone = "";
              this.s_old_password = "";
              this.s_new_password = "";
              this.s_code = "";
              clearInterval(that.timer);
              that.code = "获取验证码";
              that.iscode = false;
              this.modelPass = false;
              this.$message({
                type: "info",
                message: "请重新登录"
              });
            }
          })
          .catch(e => {});
      } else {
        this.$message({
          type: "error",
          message: "请先输入登录信息"
        });
      }
    },
    login() {
      this.modelLogin = true;
    },
    //退出
    outlogin() {
      let that = this;
      let msg = {
        id: localStorage.getItem("YKuserid")
      };
      outlogin(this.qs(msg))
        .then(res => {
          this.$message({
            type: "info",
            message: res.data.msg
          });
          that.$router.push({
            name: "home"
          });
          if (res.data.code == 0) {
            that.userphone = "";
            localStorage.removeItem("YKuserid");
            localStorage.removeItem("YKuserphone");
          }
        })
        .catch(e => {});
    },
    mouseOver() {
      this.hide_addr = true;
    },
    mouseLeave() {
      this.hide_addr = false;
    },
    cart() {
      if (localStorage.getItem("YKuserid")) {
        this.$router.push({
          name: "car"
        });
      } else {
        // this.$message({
        //   type: "error",
        //   message: "请登录"
        // });
        this.modelLogin = true;
        return;
      }
    },
    jihuo() {
      if (localStorage.getItem("YKuserid")) {
        this.$router.push({
          name: "myKecheng",
          params: {
            c: "1"
          }
        });
      } else {
        // this.$message({
        //   type: "error",
        //   message: "请登录"
        // });
        this.modelLogin = true;
        return;
      }
    },
    victor() {
      if (localStorage.getItem("YKuserid")) {
        easemobim.bind();
      } else {
        // this.$message({
        //   type: "error",
        //   message: "请登录"
        // });
        this.modelLogin = true;
        return;
      }
    },
    tolearn(i) {
      if (localStorage.getItem("YKuserid")) {
        if (i == 4) {
          //我的课程
          this.$router.push({
            name: "myKecheng"
          });
        } else if (i == 1) {
          //我的订单
          this.$router.push({
            name: "order"
          });
        }
      } else {
        // this.$message({
        //   type: "error",
        //   message: "请登录"
        // });
        this.modelLogin = true;
        return;
      }
    },
    goorder(i) {
      if (i == 0) {
        //账号管理
        this.$router.push({
          name: "account"
        });
      } else if (i == 1) {
        //我的订单
        this.$router.push({
          name: "order"
        });
      } else if (i == 2) {
        //我的购物车
        this.$router.push({
          name: "car"
        });
      } else if (i == 4) {
        //我的课程
        this.$router.push({
          name: "myKecheng"
        });
      }
    },
    go_login() {
      this.modelRegister = false;
      this.modelLogin = true;
      this.modelPass = false;
    },
    tomain() {
      if (localStorage.getItem("YKuserid")) {
        this.$router.push({
          name: "main"
        });
      } else {
        // this.$message({
        //   type: "error",
        //   message: "请登录"
        // });
        this.modelLogin = true;
        return;
      }
    },
    toAise() {
      this.$router.push({
        name: "asideCon",
        params: {
          title: "帮助"
        }
      });
    }
  },
  components: { AppFooter }
};
</script>

<style scoped>
.headerAll {
  width: 100%;
}
.top_header {
  border-bottom: 1px solid #444750;
  padding: 15px 0;
  background: #262630;
}
.header {
  width: 1200px;
  /* height: 33px; */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.address {
  position: absolute;
  top: 33px;
  width: 304px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(206, 204, 204, 1);
  overflow: hidden;
  padding-top: 16px;
  z-index: 999;
}

.addBg,
.bga {
  color: #c8a94f !important;
}
.vv:hover {
  color: #c8a94f;
}
.address > div {
  width: 20%;
  text-align: center;
  float: left;
  font-size: 12px;
  color: #333;
  padding-bottom: 16px;
}
.header_left_all {
  height: 100%;
  justify-content: center;
}
.header_left_all,
.header_right_a {
  font-size: 12px;
  color: #797a8c;
  
}
.header_right_a{
  display: flex;
  align-items: center;
}
.header_left_all > img {
  margin-right: 5px;
  width: 18px;
  height: 14px;
}
.none {
  display: none;
}
.header_right {
  width: 464px;
  justify-content: space-between;
  display: flex;
  align-items: center;
  height: 100%;
  margin-right: 50px;
}
.header_right_a > img {
  margin-right: 3px;
  width: 25px;
  height: 25px;
}
.header_right > .red_color {
  width: 60px;
  height: 25px;
  /* background: #fff;
  border: 1px solid rgba(238, 238, 238, 1); */
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
  line-height: 25px;
  color: #797b88;
}
.header_right > .red_color:hover {
  /* background: #acabab; */
}
.aa {
  position: relative;
  width: 83px;
  height: 100%;
  justify-content: center;
}
.bb {
  height: 100%;
  justify-content: center;
  position: relative;
  z-index: 1000;
  width: 100px;
}
.bb > span {
  width: 60px;
  height: 25px;
  border: 1px solid #977c47;
  border-radius: 25px;
  font-size: 12px;
  display: block;
  text-align: center;
  line-height: 25px;
  color: #7b7d8a;
}
.bb > span:hover {
  background: #977c47;
  color: #fff;
}
.appcode {
  width: 100px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(206, 204, 204, 1);
  padding-top: 8px;
  position: absolute;
  top: 33px;
  right: 0px;
  z-index: 999;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  padding:0 10px;
}
.appcode > div > img {
  width: 99px;
  height: 98px;
  margin: 0 auto;
  margin-bottom: 7px;
  display: block;
}
.appcode > div > div {
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  line-height: 18px;
  text-align: center;
}
.bb2 {
  position: absolute;
  top: -19px;
  width: 100px;
  flex-direction: column;
}
.bb2 > p:nth-child(1) {
  height: 33px;
  line-height: 37px;
  text-align: center;
  border-top: none;
  margin: 0;
}
.bb2:hover > p:nth-child(1) {
  color: #c8a94f;
}
.bb2_p1 {
  /* background: rgba(255, 255, 255, 1); */
}
.bb2_p2 {
  width: 60px;
  line-height: 33px;
  text-align: center;
  border-top: none;
  margin: 0;
  background: rgba(255, 255, 255, 1);
}
.bb2_p2:hover {
  color: #c8a94f;
}
.logo {
  width: 198px;
  height: 49px;
}
/* 导航 */

.nav-wrap {
  /* height: 60px; */
  background: #262630;
  line-height: 60px;
  cursor: pointer;
}
.nav {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}
.nav .nav_div {
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  color: #ffffff;
  display: flex;
  /* height: 60px; */
  align-items: center;
}
.nav .nav_div .nav_left{
  width: 175px;
}
.nav .nav_div .nav_left img{
  width: 175px;
}
.nav .nav_div .nav_right{
  width: 976px;
  display: flex;
  justify-content: flex-end;
}
.nav .nav_div .nav_right div {
  width: 144px;
  height: 60px;
  padding-bottom: 15px;
  text-align: center;
  line-height: 60px;
  color: #fff;
}
.nav .nav_div .nav_right div.active {
  color: #c8a94f;
  background: url(../assets/nav_active_bg.png) no-repeat;
  background-position: center center;
}
/* .nav_div > div {
  width: 14.9%;
  text-align: center;
  text-decoration: none;
  color: #333333;
  line-height: 60px;
  margin: 0;
  font-size: 18px;
} */

.nav .nav_div .nav_right div:hover {
  color: #c8a94f;
}

.nav .nav_div .nav_right div.active {
  color: #c8a94f;
}
.nav_left > p {
  width: 175px;
  height: 100%;
  background: rgba(216, 20, 23, 1);
  font-size: 18px;
  color: rgba(255, 255, 255, 1);
  justify-content: center;
}
.nav_left > p > img {
  width: 16px;
  height: 14px;
  margin-right: 5px;
}
.over_li,
.out_hidden {
  width: 175px;
  height: 115px;
}
.out_hidden {
  position: relative;
  overflow: hidden;
}
.over_hidden {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
  display: none;
}
.f_ul {
  height: 300px;
  overflow: hidden;
  text-align: center;
  position: absolute;
  /* left: 300px; */
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
}
.f_ul > div > p {
  font-size: 16px;
  font-weight: 800;
  color: rgba(255, 255, 255, 1);
  white-space: 1px;
  line-height: 28px;
}
.f_ul > div > img {
  width: 98px;
  height: 5px;
  margin: 0 auto;
}
.f_ul li {
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  line-height: 28px;
}
.f_ul li:hover {
  color: #c8a94f;
}
/* asideNav */
.asideNav {
  position: fixed;
  right: 0;
  z-index: 1000;
  cursor: pointer;
  top: 300px;
}
.asideNav > div {
  width: 86px;
  background: rgba(23, 23, 23, 1);
  border-bottom: 1px solid #fff;
  padding: 7px 0;
  position: relative;
}
.asideNav >>> .el-badge {
  position: absolute;
  right: 2px;
}
.asideNav >>> .el-badge__content {
  background-color: rgba(216, 20, 23, 1);
  border: 0;
}
.asideNav > div:hover {
  background: #c8a94f;
}
.asideNav > div > p {
  font-size: 16px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  margin: 0;
  margin-top: 4px;
}
.asideNav > div > img {
  margin: 0 auto;
  display: block;
}
/* register */
.register >>> .el-dialog {
  border-radius: 10px !important;
}
.register >>> .el-dialog__headerbtn {
  top: 8px !important;
  right: 10px !important;
}
.register >>> .el-dialog__body {
  padding: 0px 62px;
  padding-top: 36px;
}
.reg_top {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #c8a94f;
  text-align: center;
  justify-content: center;
}
.reg_top>img{
  width: 100px;
  height: 29px;
}
.reg_div {
  height: 64px;
  border-bottom: 1px solid #333333;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 3px;
  cursor: pointer;
}
.reg_div input {
  border: 0;
  display: block;
  background: #fff;
  margin-bottom: 7px;
  font-size: 14px;
  color: #333;
  width: 200px;
  margin-right: 6px;
}
.reg_div input::placeholder {
  font-size: 14px;
  color: #666;
}
.reg_div_div{
  height: 64px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 3px;
  cursor: pointer;
}
.addr_slo {
  width: 26%;
  font-size: 14px;
  color: #333;
  padding: 0 3px;
  margin-bottom: 7px;
}
.reg_p {
  font-size: 14px;
  color: #c8a94f;
  margin-bottom: 7px;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
}
.img_prev {
  width: 15px;
  height: 9px;
  margin-bottom: 10px;
}
.pass_img {
  width: 16px;
  height: 12px;
  margin-bottom: 10px;
}
.pass_img2 {
  width: 14px;
  height: 8px;
  margin-bottom: 10px;
}
.register >>> .dialog-footer > button {
  width: 312px;
  height: 40px;
  background: #c8a94f;
  border-radius: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 1);
  border-color: #c8a94f;
  margin-bottom: 20px;
}
.register >>> .el-dialog__footer {
  padding: 0px 62px;
  padding-top: 31px;
  padding-bottom: 55px;
  text-align: right;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.jump_line {
  width: 111px;
  height: 1px;
  background: #333333;
}
.jump_txet {
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  margin: 0 16px;
  cursor: pointer;
}
/* login */

.footer_button {
  margin-bottom: 4px;
  justify-content: space-between;
}
.footer_button > p {
  font-size: 14px;
  cursor: pointer;
}
.footer_button > p:nth-child(1) {
  color: #c8a94f;
}
.footer_button > p:nth-child(2) {
  color: rgba(51, 51, 51, 1);
}
.footer_button > p:nth-child(2) > span:nth-child(1) {
  margin-right: 10px;
}
</style>
